/* Global transition */
// See https://vuejs.org/v2/guide/transitions.html for detail

// fade
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
	opacity: 0;
}

// fade-transform
.fade-transform-leave-active,
.fade-transform-enter-active {
	transition: all 0.5s;
}

.fade-transform-enter {
	opacity: 0;
	transform: translateX(-30px);
}

.fade-transform-leave-to {
	opacity: 0;
	transform: translateX(30px);
}

// breadcrumb
.breadcrumb-enter-active,
.breadcrumb-leave-active {
	transition: all 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
	opacity: 0;
	transform: translateX(20px);
}

.breadcrumb-move {
	transition: all 0.5s;
}

.breadcrumb-leave-active {
	position: absolute;
}

//开始过度
.fade-enter-from {
	background: red;
	width: 0px;
	height: 0px;
	transform: rotate(360deg);
}

//开始过度了
.fade-enter-active {
	transition: all 2.5s linear;
}

//过度完成
.fade-enter-to {
	background: yellow;
	width: 200px;
	height: 200px;
}

//离开的过度
.fade-leave-from {
	width: 200px;
	height: 200px;
	transform: rotate(360deg);
}

//离开中过度
.fade-leave-active {
	transition: all 1s linear;
}

//离开完成
.fade-leave-to {
	width: 0px;
	height: 0px;
}
